<template>
  <div class="message-center">
    <el-tabs v-model="activeTab">
      <!-- 商品消息 -->
      <el-tab-pane label="商品消息" name="product">
        <div class="message-list">
          <el-card v-for="(message, index) in productMessages" :key="index" class="message-card">
            <div class="message-header">
              <el-avatar :size="40" :src="message.avatar"></el-avatar>
              <div class="message-info">
                <h4>{{ message.title }}</h4>
                <span class="time">{{ message.time }}</span>
              </div>
              <el-tag :type="message.status === 'unread' ? 'danger' : 'info'" size="small">
                {{ message.status === 'unread' ? '未读' : '已读' }}
              </el-tag>
            </div>
            <div class="message-content">
              <p>{{ message.content }}</p>
              <div v-if="message.product" class="product-info">
                <div class="product-details">
                  <h5>{{ message.product.name }}</h5>
                  <p class="price">¥{{ message.product.price }}</p>
                  <p class="description">{{ message.product.description }}</p>
                </div>
              </div>
            </div>
            <div class="message-actions">
              <el-button type="text" @click="handleMessageAction(message, 'view')">查看详情</el-button>
              <el-button type="text" @click="handleMessageAction(message, 'delete')">删除</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <!-- 系统消息 -->
      <el-tab-pane label="系统消息" name="system">
        <div class="message-list">
          <el-card v-for="(message, index) in systemMessages" :key="index" class="message-card">
            <div class="message-header">
              <i class="el-icon-bell"></i>
              <div class="message-info">
                <h4>{{ message.title }}</h4>
                <span class="time">{{ message.time }}</span>
              </div>
            </div>
            <div class="message-content">
              <p>{{ message.content }}</p>
            </div>
            <div class="message-actions">
              <el-button type="text" @click="handleMessageAction(message, 'view')">查看详情</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <!-- 互动消息 -->
      <el-tab-pane label="互动消息" name="interaction">
        <div class="message-list">
          <el-card v-for="(message, index) in interactionMessages" :key="index" class="message-card">
            <div class="message-header">
              <el-avatar :size="40" :src="message.avatar"></el-avatar>
              <div class="message-info">
                <h4>{{ message.title }}</h4>
                <span class="time">{{ message.time }}</span>
              </div>
            </div>
            <div class="message-content">
              <p>{{ message.content }}</p>
            </div>
            <div class="message-actions">
              <el-button type="text" @click="handleMessageAction(message, 'reply')">回复</el-button>
              <el-button type="text" @click="handleMessageAction(message, 'delete')">删除</el-button>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 消息详情对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <div v-if="currentMessage" class="message-detail">
        <div class="detail-header">
          <el-avatar :size="60" :src="currentMessage.avatar"></el-avatar>
          <div class="detail-info">
            <h3>{{ currentMessage.title }}</h3>
            <p class="time">{{ currentMessage.time }}</p>
          </div>
        </div>
        <div class="detail-content">
          <p>{{ currentMessage.content }}</p>
          <div v-if="currentMessage.product" class="product-detail">
            <div class="product-info">
              <h4>{{ currentMessage.product.name }}</h4>
              <p class="price">¥{{ currentMessage.product.price }}</p>
              <p class="description">{{ currentMessage.product.description }}</p>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="markAsRead">标记为已读</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MessageCenter',
  data() {
    return {
      activeTab: 'product',
      dialogVisible: false,
      dialogTitle: '',
      currentMessage: null,
      productMessages: [
        {
          id: 1,
          title: '商品降价通知',
          content: '您关注的商品"iPhone 13 Pro"已降价500元，现在仅售8999元！',
          time: '2024-03-20 14:30',
          status: 'unread',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          product: {
            name: 'iPhone 13 Pro',
            price: 8999,
            description: 'Apple iPhone 13 Pro (A2639) 256GB 远峰蓝色 支持移动联通电信5G 双卡双待'
          }
        },
        {
          id: 2,
          title: '商品补货通知',
          content: '您关注的商品"MacBook Pro"已补货，现在可以购买了！',
          time: '2024-03-19 10:20',
          status: 'read',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          product: {
            name: 'MacBook Pro',
            price: 12999,
            description: 'Apple MacBook Pro 14英寸 M1 Pro芯片 16G 512G 深空灰 笔记本电脑'
          }
        }
      ],
      systemMessages: [
        {
          id: 1,
          title: '系统维护通知',
          content: '系统将于2024年3月25日凌晨2:00-4:00进行维护升级，期间可能影响部分功能使用。',
          time: '2024-03-20 09:00',
          status: 'read'
        },
        {
          id: 2,
          title: '新功能上线',
          content: '我们推出了全新的商品推荐系统，现在可以根据您的浏览历史为您推荐更精准的商品。',
          time: '2024-03-19 15:30',
          status: 'unread'
        }
      ],
      interactionMessages: [
        {
          id: 1,
          title: '用户评论',
          content: '用户"张三"评论了您的商品："这个商品质量很好，性价比很高！"',
          time: '2024-03-20 16:45',
          status: 'unread',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        },
        {
          id: 2,
          title: '点赞通知',
          content: '用户"李四"点赞了您的商品评价',
          time: '2024-03-19 18:20',
          status: 'read',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        }
      ]
    }
  },
  methods: {
    handleMessageAction(message, action) {
      if (action === 'view') {
        this.currentMessage = message;
        this.dialogTitle = message.title;
        this.dialogVisible = true;
      } else if (action === 'delete') {
        this.$confirm('确定要删除这条消息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteMessage(message);
        }).catch(() => {});
      } else if (action === 'reply') {
        // 处理回复逻辑
        this.$message.success('回复功能开发中...');
      }
    },
    deleteMessage(message) {
      // 根据消息类型删除对应的消息
      if (this.activeTab === 'product') {
        this.productMessages = this.productMessages.filter(m => m.id !== message.id);
      } else if (this.activeTab === 'system') {
        this.systemMessages = this.systemMessages.filter(m => m.id !== message.id);
      } else if (this.activeTab === 'interaction') {
        this.interactionMessages = this.interactionMessages.filter(m => m.id !== message.id);
      }
      this.$message.success('删除成功');
    },
    markAsRead() {
      if (this.currentMessage) {
        this.currentMessage.status = 'read';
        this.dialogVisible = false;
        this.$message.success('已标记为已读');
      }
    }
  }
}
</script>

<style scoped>
.message-center {
  padding: 20px;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message-card {
  transition: all 0.3s;
}

.message-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.message-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.message-info {
  flex: 1;
}

.message-info h4 {
  margin: 0;
  font-size: 16px;
}

.time {
  color: #999;
  font-size: 12px;
}

.message-content {
  margin-bottom: 15px;
}

.message-content p {
  margin: 0;
  color: #666;
}

.product-info {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.product-details h5 {
  margin: 0 0 5px 0;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.message-detail {
  padding: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.detail-info h3 {
  margin: 0;
}

.product-detail {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.product-info h4 {
  margin: 0 0 10px 0;
}

.description {
  color: #666;
  margin-top: 10px;
}
</style> 